<template>
<view @click="onClick" class="order-brief">
  <view class="x-container">
    <view class="x-space-between item">
      <view class="label">{{props.data.ownerName}}-{{ props.data.ownerPhone }}</view>
      <view class="value"><text class="money">{{ props.data.termAmount }}</text><text class="unit">元</text></view>
    </view>
    <view class="desc item">{{props.data.orderRemark}}</view>
    <view class="x-space-between item">
      <view class="span">起租日：{{ props.data.leaseStartDate }}</view>
      <view class="span">期数：{{ props.data.currentLeaseTerm }}/{{ props.data.leaseTerm }}期</view>
      <view class="span">{{ format(props.data.orderState) }}</view>
    </view>
  </view>
</view>
</template>

<script setup name="x-order-item">
import {Constant, Helper} from "core";

const props = defineProps({
  data:{
    type: Object,
    default: () => {return {}}
  }
})

const onClick = () => {
  uni.navigateTo({url: `/pages/order/detail?orderNo=${props.data.orderNo}`})
}

const format = (value) => {
  let obj =  Constant.ORDER.STATUS.find(x => x.value == value);
  if(Helper.emptyJson(obj)) {
    return "";
  }
  return obj.label;
}

</script>

<style scoped lang="less">
  .order-brief {
    background-color: #fff;
    padding-bottom: 10rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;

    .item {
      margin-bottom: 20rpx;

      .label {
        color: #333333;
        font-size: 28rpx;
      }

      .span {
        color: #999999;
        font-size: 28rpx;
      }

      .value {
        font-size: 28rpx;
        .money{
          font-size: 32rpx;
          color: @primary;
        }

        .unit {
          color: #999999;
        }
      }
    }

    .desc {
      font-size: 28rpx;
      color: #999999;
    }
  }
</style>
